<template>
  <!--    <el-form v-model="dialogVisible" width="80%" title="操作步骤" destroy-on-close center>-->
    <el-form width="80%" title="物料需求" >
        <template #default>
            <!-- 列表部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-table ref="requireTable" :data="requires" border :stripe="true" style="width: 100%">
                        <el-table-column type="index" width="55" label="序号" />
                        <el-table-column label="产品物料编号" >
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">{{ scope.row.proId }}</span>
                                <span v-else>{{ scope.row.matId }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品物料名称">
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">{{ scope.row.proName }}</span>
                                <span v-else>{{ scope.row.matName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="规格型号">
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">{{ scope.row.proModel }}</span>
                                <span v-else>{{ scope.row.matModel }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="单位" >
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">{{ scope.row.proUnit }}</span>
                                <span v-else>{{ scope.row.matUnit }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="供应状态" >
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">{{ scope.row.proStockStatus == 1 ? '启用' : '禁用'}}</span>
                                <span v-else>{{ scope.row.matStockStatus == 1 ? '启用' : '禁用'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="产品物料库存" >
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">{{ scope.row.proCount }}</span>
                                <span v-else>{{ scope.row.matCount }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="category" label="物料/产品">
                            <template #default="scope">
                                <span v-if="scope.row.category == 1">产品</span>
                                <span v-else>物料</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="requireTime" label="需求日期" />
                        <el-table-column prop="requireNum" label="需求数量" />
                    </el-table>
                </el-col>
            </el-row>
            <!-- 列表部分结束 -->
            <!-- 分页部分开始 -->
            <el-row style="margin-top: 10px;">
                <el-col :span="24">
                    <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit" :total="total" />
                </el-col>
            </el-row>
            <!-- 分页部分结束 -->
<!--            <OrderrequireAddWin ref="addOrder" :visible="addRequireVisible" :bomId="bomId" :woId="woId" @optionCompleted="addRequireOptionCompleted"/>-->
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="20"></el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="closeWin">关闭</el-button>
                </el-col>
            </el-row>
        </template>
    </el-form>
</template>

<script>
import {watch} from "vue";
import OrderRequireRequest from '../../../../api/orderRequire.js';
// import OrderrequireAddWin from "@/views/pro/order/require/orderrequire-add-win.vue";


export default {
    props:["woId","bomId"],// 属性
    emits:["optionCompleted"],// 暴漏的事件
    name: "require.vue",
    components:{
        // OrderRequireAddWin
    },
    data(){//数据模型
        return{
            //order:{},//接收require数据
            dialogVisible: false, // 弹窗标记
            queryRequire:{},// 绑定查询条件
            requires:[],
            total:0,// 总记录数
            limit:10,// 每页显示的记录
            currentPage:1,// 当前页码
            currentStepType:undefined,
            woId:this.woId,
            bomId:"",
            addRequireVisible:false,//生成工单弹窗

        }
    },methods:{
        // addRequireOptionCompleted(){
        //   this.addRequireVisible = false;
        // },
        /**
         * 翻页事件
         */
        pageChange(currentPage,currentLimit){

        },

        /**
         * 关闭当前的窗体
         */
        closeWin(){
            // 通知父窗体，操作完成
            this.$emit("optionCompleted");
        },
        /**
         * 加载require组成列表
         */
        loadRequire(woId){
            // 准备参数
            this.queryRequire.page = this.currentPage;
            this.queryRequire.limit = this.limit;
            if(woId)
                this.queryRequire.woId = woId;
            OrderRequireRequest.loadOrderRequire(this.queryRequire,res => {
                console.log(res)
                // 赋值
                this.requires = res.data.data;
                this.total = res.data.total;
            });
        },
        // toAddOrder(row){
        //     this.$refs.addOrder.setParentId(row.woId);
        //     this.bomId = row.bomId
        //     this.addRequireVisible = true;
        //     console.log(this.bomId)
        // }
    },mounted(props) {
        // this.loadRequire();
        console.log('加载的物料需求')
        console.log(this.woId)
        this.loadRequire(this.woId);
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
            if(this.dialogVisible){
                this.loadRequire(this.woId);
            }
        });
        watch(()=>this.woId,(newVal,oldVal)=>{
            console.log(this.woId)
            this.currentStepType = newVal;
            if(this.dialogVisible){
                this.loadRequire(this.woId);
            }
        });

    }
}
</script>

<style scoped>

</style>
